<template>
  <div class="login">
    <div class="loginBox">
      <p class="title">设置新密码</p>
      <mu-container>
        <mu-form ref="form" :model="validateForm" class="mu-demo-form">
          <mu-form-item prop="password" :rules="password">
            <mu-text-field type="password" v-model="validateForm.password" prop="password" placeholder="请设置登录密码(6-20位，数字或字母)"></mu-text-field>
          </mu-form-item>

          <mu-form-item prop="repeatPassword" :rules="repeatPassword">
            <mu-text-field type="password" v-model="validateForm.repeatPassword" prop="repeatPassword" placeholder="请再次输入登录密码"></mu-text-field>
          </mu-form-item>
        </mu-form>
      </mu-container>

      <div class="sign">
        <div>
        
        </div>

        <img
          v-if="this.validateForm.repeatPassword == '' || this.validateForm.password == ''"
          src="@as/img/tijiao_moren@2x.png"
        >

        <img
          v-if="this.validateForm.repeatPassword != '' && this.validateForm.password != ''"
          src="@as/img/tijiao@2x.png"
          alt
          @click="submit()"
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: [
        { validate: val => !!val, message: "必须填写密码" },
        {
          validate: val => /^[a-zA-Z0-9]{6,20}$/.test(val),
          message: "密码为长度大于6小于20位的数字或字母"
        }
      ],
      repeatPassword: [
        { validate: val => !!val, message: "请重复填写密码" },
        {
          validate: val => this.validateForm.password == val,
          message: "输入密码不一致"
        }
      ],

      validateForm: {
        password: "",
        repeatPassword: ""
      }
    };
  },
  mounted() {
     this.$progress.done();
  },
  methods: {
    register() {
      this.$router.push({
        path: "/register"
      });
    },
    forgetPasswoed() {
      this.$router.push({
        path: "/forgetPassword"
      });
    },
    submit() {
      this.$refs.form.validate().then(vaild => {
        if (vaild) {
          this.$http
            .post("/app/Login/reset", {
               phone:this.$route.query.phone,
               password:this.validateForm.password
            })
            .then(res => {
              this.$toast.success(res.msg);
              this.$router.push({path:'/login'});
            });
        }
      });
    },
    clear() {
      this.$refs.form.clear();
      this.validateForm = {
        username: "",
        password: "",
        isAgree: false
      };
    }
  }
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  display: flex;
  justify-content: center;
  // border:1px solid #000
}

.title {
  font-size: 36px;
  margin-top:50px;
  margin-bottom: 60px;
  font-weight: Medium;

}
.loginBox {
  width: 85%;
  //  border:1px solid #000
}
.mu-demo-form {
  width: 100%;
  max-width: 460px;
  //  border:1px solid #000
}

.solid {
  border-left: 1px solid #eee !important;
  height: 15px;
  width: 0px;
  margin: 10px;
}

.sign {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;

  div {
    width: 125px;
    border: 1px solid rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
  }
  p {
    font-size: 12.5px;
    color: #f47548;
  }

  img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
  }
}
</style>